import './TheneBackSelect.scss'

import { useState } from 'react'
import PropTypes from 'prop-types'
import { Collapse, Badge } from 'antd'
import { useEventEmitter } from 'ahooks'
import { ThemeBackList, ThemeCssBackList } from '../../Config/themeList'

import { MixColorTemp } from '../../Template/FormTemplate'
import { DrawerBox } from '..'


const RenderTemplate = ({ data, click, setPatter, onActive }) => {
    RenderTemplate.propTypes = { data: PropTypes.string, click: PropTypes.bool, setPatter: PropTypes.func, onActive: PropTypes.func }
    const [name, ...A] = data.split(',')
    const style = Object.fromEntries(A.map((value, index) => [`--A0${index + 1}`, value]))
    const [OptionsCall] = useState()
    return (
        <div
            className={`Patter__Render Box_Shadow__A01 ${name}`}
            style={style}
            onClick={() => {
                if (click) {
                    setPatter(data)
                    onActive('patter', data)
                }
            }}
        >
            <DrawerBox OptionsCall={OptionsCall} />
        </div>
    )
}


const TheneBack = ({ data, ModalEvent }) => {
    TheneBack.propTypes = { data: PropTypes.object, ModalEvent: PropTypes.object }
    const themeColor = sessionStorage.getItem('theme')
    const DefaultColor = `linear-gradient(0deg, ${themeColor}, ${themeColor})`

    const { active, theme } = data
    const [Active, setActive] = useState(active)
    const [Style, setStyle] = useState(active.backType === 'color' ? active.backData : DefaultColor)
    const [Patter, setPatter] = useState(active.backType === 'patter' ? active.backData : '')

    const onActive = (backType, backData) => {
        switch (backType) {
            case 'image':
                setActive({ backType, backData })
                ModalEvent.emit({ backType, backData })
                break;
            case 'color':
                setActive({ backType, backData })
                ModalEvent.emit({ backType, backData })
                break;
            case 'patter':
                setActive({ backType, backData })
                ModalEvent.emit({ backType, backData })
                break
            default:
                break;
        }
    }

    const FormEvent = useEventEmitter()
    FormEvent.useSubscription(val => setStyle(val))

    const items = [
        {
            key: 1,
            label: '图片背景',
            children: (
                <div className='TheneBackSelect__Common TheneBackSelect__Image'>
                    {Object.keys(ThemeBackList).map(key => {
                        const { backType, backData } = Active
                        if (backType === 'image' && backData === key) return (
                            <Badge.Ribbon text="当前选中" key={key}>
                                <img className='Box_Shadow__A01' src={ThemeBackList[key]} alt="" />
                            </Badge.Ribbon>
                        )
                        else return (
                            <img
                                className='Box_Shadow__A01'
                                key={key}
                                src={ThemeBackList[key]}
                                alt=""
                                onClick={() => onActive('image', key)}
                            />
                        )
                    })}
                </div>
            ),
        },
        {
            key: 2,
            label: '纯色背景',
            children: (
                <div className='TheneBackSelect__Common TheneBackSelect__Color' onClick={() => onActive('color', Style)}>
                    {Style}
                    {Active.backType === 'color' ?
                        <Badge.Ribbon text="当前选中" >
                            <div className='Back Box_Shadow__A01' style={{ '--back': Style }}>背景</div>
                        </Badge.Ribbon> :
                        <div className='Back Box_Shadow__A01' style={{ '--back': Style }}>背景</div>
                    }
                    <div className='CommonForm'>
                        <MixColorTemp
                            item={{ uuid: 'ThemeSet', label: '颜色设置', name: 'backData' }}
                            data={theme}
                            FormEvent={FormEvent}
                        />
                    </div>
                </div>
            ),
        },
        {
            key: 3,
            label: 'Css背景',
            children: (
                <div className='TheneBackSelect__Common TheneBackSelect__Css'>
                    {Object.keys(ThemeCssBackList).map(key => {
                        const { data } = ThemeCssBackList[key]
                        const { backType, backData } = Active

                        if (backType === 'patter' && backData.split(',')[0] === key) return (
                            <Badge.Ribbon text="当前选中" key={key}>
                                <RenderTemplate data={Patter} />
                            </Badge.Ribbon>
                        )
                        else return (
                            <RenderTemplate key={key} data={data} click setPatter={setPatter} onActive={onActive} />
                        )
                    })}
                </div>
            ),
        },
        {
            key: 4,
            label: 'Canvas背景',
            children: (
                <div className='TheneBackSelect__Common TheneBackSelect__Canvas'>

                </div>
            ),
        }
    ];

    return (
        <div className='TheneBackSelect'>
            <Collapse items={items} accordion defaultActiveKey={[3]} />
        </div>
    );
};

export default TheneBack